<template>
  <div class="solicit">
      <header class="header">
          <img @click="back" src="http://bpic.588ku.com/original_pic/19/04/18/9ac65d10f0e5ede674d0ab0abcad5b96.jpg" alt="">
          <h3>房屋求购</h3>
      </header>
      <div class="content">
           
          <div class="title">
              <div class="left">
                  <span @click="changeHouse" :class="type ? 'active ': ''">房产类型</span>
                  <img src="https://pages.anjukestatic.com/usersite/touch/weixin/img/broker/esf_list_icon_blackdown@2x.png" alt="">
              </div>
              <div class="right"> 
                  <span @click="changeArea" :class="see ? 'active ': ''">区域选择</span>
                  <img src="https://pages.anjukestatic.com/usersite/touch/weixin/img/broker/esf_list_icon_blackdown@2x.png" alt="">
              </div>
          </div>
          <div v-if="type" class="box1">
              <div class="selectq" v-for="EachItem in houseList" :key='EachItem.id'  >
                    <span>{{EachItem.name}}</span>
              </div>
          </div>
          <div v-show="see" class="box">
             <div class="selecth" v-for="(is) in address" :key='is.id' >
                <span>{{is.name}}</span>
            </div> 
          </div>
          <div class="list">
             <div class="item" v-for="(item,index) in newList" :key='index'>
                 <div class="top" >
                     <div class="topBox">
                          <dl class="dl"  >
                            <dt>
                                <img :src="item.BaseDetail.Onebroker.brokerimg" alt="">
                            </dt>
                            <dd class="dd" >
                                <h3>{{item.BaseDetail.Onebroker.username}}</h3>
                            </dd>
                        </dl>
                        <span class="time" >{{item.firstuptimestr}} </span>
                     </div>
                    <h3 class="address">{{item.housetitle}}</h3>
                 </div>
                 <div class="bot">
                     <div class="text">
                         <div class="area">
                            <span>意向区域:</span>
                            <span>{{item.qyname}}</span>
                         </div>
                         <div class="price">
                            <span>意向价格:</span> 
                            <span class="money">{{item.price}}/月</span>
                         </div>
                     </div>
                     <div class="icon">
                         <img @click="msg(item.housesid)" class="img" src="https://pages.anjukestatic.com/usersite/touch/weixin/img/broker/comm_dh_icon_wl@2x.png" alt="">
                         <img @click="phone" src="http://bpic.588ku.com/element_origin_min_pic/19/03/07/3477371946bb38747ac61f5e1ee1076d.jpg" alt="">
                     </div>
                 </div>
             </div>
          </div>
      </div>
  </div>
</template>

<script>
import {getList,address,houseType} from '../../services/index'
export default {
    data() {
        return {
            list:[],
            newList:[],
            address:[],
            houseList:[],
            see:false,
            type:false,
        }
    },
    async onShow(){
        //页面列表
        let result=await getList(
            'broom=&buildarea=&communityid=&decoratetype=&floortype=&heading=&keywords=&location=&nearby=&othertype=&price=&renttype=&districtids=&sqids=&lineid=&stationid=&tags=&psort=&lift=&heatingType=&buildType=&page=1&pcount=15&source=3'
        )
        let ite=0
        let arrIndex=2
        if(result.status==200){
            this.list=result.data.list
        }
        // console.log(this.list,'list');

        for(var i=0;i<this.list.length;i++){
            if(i!=ite&&i!=arrIndex&&i!=this.list.length-1){
                // console.log(i,'fffff');
                this.newList.push(this.list[i])
            }
        }
        console.log(this.newList,'newList');

        //区域列表
        let res=await address()
        // console.log(res,'eeeee');
        if(res.status==200){
            this.address=res.data
        }
        // console.log(this.address,'add');

        //房产类型
        let house=await houseType()
        // console.log(house.data,'house');
        if(house.status==0){
            this.houseList=house.data.filters.property_type
        }
        
        // console.log(this.houseList,'this.houseList');
    },
    methods: {
         back(){
            wx.switchTab({    //跳转到tabBar页面，并关闭其他所有tabBar页面
                url:"/pages/index/index"
            })
        },
         msg(id){
             console.log(id,'id');
             wx.redirectTo({    //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的）
                url:"/pages/message/index?id="+id
            })

        },
        phone(){
             wx.makePhoneCall({
                phoneNumber: '1340000' //仅为示例，并非真实的电话号码
            })
        },
        changeHouse(){
            this.type=!this.type
        },
        changeArea(){
            this.see=!this.see
        }
    },
}
</script>

<style lang="scss" scoped>
    .solicit{
        width: 100%;
        height: 100%;
        background-color: rgb(35,145,249);
        display: flex;
        flex-direction: column;
        
    }
    .header{
        width: 100%;
        height: 80rpx;
        margin-bottom: 10px;
        line-height: 60rpx;
        margin-top: 50rpx;
        display: flex;
        padding: 0 20px;
        box-sizing: border-box;
        align-items: center;
        color:#fff ;
        h3{
            margin: 0px 100px;
        }
        img{
            width: 20px;
            height: 20px;
            padding: 0px 5px;
        }
    }
    .content{
        width: 100%;
        background-color: rgb(242,242,242);
        display: flex;
        flex-direction: column;
        .title{
            background: #fff;
            width: 100%;
            height: 90rpx;
            line-height: 90rpx;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-bottom: 1px solid rgb(121,121,121);
            .left{
                display: flex;
                align-items: center;
                img{
                    width: 10px;
                    height: 10px;
                    padding: 0px 10px;
                }
            }
            .right{
                display: flex;
                align-items: center;
                img{
                    width: 10px;
                    height: 10px;
                    padding: 0px 10px;
                }
            }
        }
        .active{
            color: red;
        }
        .box1{   
            width: 100%;
            position: fixed;
            left: 0;
            top: 110px;
            height: 100%;
            // background-color: rgba(0,0,0,.1);
            background: #00000099;
             height: 100%;
        }
        .box{   
            width: 100%;
            position: fixed;
            left: 0;
            top: 110px;
            height: 100%;
            // background-color: rgba(0,0,0,.1);
            background: #00000099;
            overflow-x:scroll ;
             height: 50%;
        }
        .selecth{
            width: 100%;
            display: flex;
            flex-direction: column;
            color: #fff;
            span{
                width: 100%;
                height: 40px;
                line-height: 40px;
                border-top: 1px solid #ccc;
                padding: 0 20px;
                color: #000;
                background-color: #fff;
                font-weight: bold;
            }
        }
        .selectq{
            width: 100%;
            display: flex;
            flex-direction: column;
            color: #fff;
            span{
                width: 100%;
                height: 40px;
                line-height: 40px;
                border-top: 1px solid #ccc;
                padding: 0 20px;
                color: #000;
                background-color: #fff;
            }
        }
        .list{
            display: flex;
            flex-direction: column;
            .item{
                width: 100%;
                background: #fff;
                margin-bottom: 20px;
                display: flex;
                flex-direction: column;
            }
            .top{
                display: flex;
                flex-direction: column;
                border-bottom: 1px solid #ccc;
                margin-top: 20px;
            }
            .topBox{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .time{
                    margin-right: 20px;
                }
            } 
            .dl{
                display: flex;
                margin: 0px 10px;
                align-items: center;
                img{
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                }
            }
            .dd{
                display: flex;
                flex: 1;
                justify-content:space-between;
                padding: 0 10px;
            }
            .address{
                margin: 15px 10px;
            }
            .bot{
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin: 20px 0px;
                box-sizing: border-box;
                .text{
                    display: flex;
                    .area{
                        display: flex;
                         margin: 0px 3px;
                         box-sizing: border-box;
                    }
                    .price{
                        display: flex;
                    }
                    span{
                        margin: 0px 5px;
                    }
                    .money{
                        color: red;
                    }
                }
                .icon{
                    display: flex;
                    margin-right: 10px;
                    width: 20%;
                    font-size: 12px;
                    // background-color: #ccc;
                    justify-content: space-around;
                    align-items: center;
                    img{
                        width: 20px;
                        height: 20px;
                        padding: 0px 5px;
                    }
                }
            }
        }
    }
</style>